<template>
	<div class="g-pt">
		<HeaderTop :title="title">
			<span class="header-icon" slot="left">
				<i class="iconfont icon-arrow-left1" @click="$router.back()"></i>
			</span>
			<span class="header-icon" slot="right"></span>
		</HeaderTop>

		<div class="container">
			<h1 class="title text-center">硅谷外卖</h1>
			<div class="login-nav text-center">
				<span class="nav-link" :class="{on : isShow}" @click="isShow = true">短信登录</span>
				<span class="nav-link" :class="{on : !isShow}" @click="isShow = false">密码登录</span>
			</div>
			<div class="login-box">
				<div class="login-item" :class="{on : isShow}">
					<el-form :model="messageLoginForm" :rules="messageLoginRules" ref="messageLoginRef">
					  <el-form-item prop="phone">
					    <el-input v-model="messageLoginForm.phone" placeholder="手机号"></el-input>
					  </el-form-item>
						<el-form-item prop="code" class="code-box">
						  <el-input v-model="messageLoginForm.code" placeholder="验证码" maxlength="6"></el-input>
							<div class="code" :class="{on : rightPhone}" @click.prevent="getCode">
								<button :disabled="!rightPhone || computerTime>0">
									{{computerTime>0 ? `已发送(${computerTime}s)` : '获取验证码'}}
								</button>
							</div>
						</el-form-item>
					</el-form>
					
					<div class="desc">
						温馨提示：未注册硅谷外卖账号的手机，登录时将自动注册，切代表已同意<span>《用户服务协议》</span>
					</div>
					<el-button @click="messageLogin">登录</el-button>
					<p>关于我们</p>
					
				</div>
				<div class="login-item" :class="{on : !isShow}">
					<el-form :model="passwordLoginForm" :rules="passwordLoginRules" ref="passwordLoginRef">
						<el-form-item prop="name">
							<el-input v-model="passwordLoginForm.name" placeholder="手机/邮箱/用户名"></el-input>
						</el-form-item>
						<el-form-item prop="pwd" class="code-box">
							<el-input v-model="passwordLoginForm.pwd" :type="passwordStatus" placeholder="密码"></el-input>
							<div class="code">
								<el-switch
									v-model="seePwd"
									active-color="#13ce66"
									@change="seePwdChanged">
								</el-switch>
							</div>
						</el-form-item>
						<el-form-item prop="captcha" class="code-box">
							<el-input v-model="passwordLoginForm.captcha" placeholder="验证码" maxlength="4"></el-input>
							<div class="code"><img src="http://localhost:4000/captcha" alt="" ref="captcha" @click="changeCode"></div>
						</el-form-item>
						<el-button @click="passwordLogin">登录</el-button>
					</el-form>
				</div>
			</div>
		</div>
		
		
		<!-- 提示框 -->
		<AlertTip :alertText='alertText' @closeTip="closeTip" v-show="showAlert"></AlertTip>
	</div>
		
</template>

<script>
	import AlertTip from '../../components/AlertTip/AlertTip.vue'
	export default {
		created() {
			
		},
		data() {
			// 验证手机规则
			var checkMobile = (rule, value, callback) => {
				// 验证手机的正则表达式
				const regMobile = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/
			
				if (regMobile.test(value)) {
					// 合法手机
					return callback()
				} else {
					callback(new Error('验证不通过,请输入合法的手机号!'))
				}
			};
			// 验证验证码
			var checkCode = (rule, value, callback) => {
			
				if (value.length >=4 && value.length <=6) {
					// 合法
					return callback()
				} else {
					callback(new Error('验证不通过,请输入4-6位验证码!'))
				}
			};
			return {
				// 隐藏显示Alert
				showAlert: false,
				// Alert文本
				alertText: '',
				title: '登录',
				isShow: true,
				showPassword: 'password',
				// 短信登录表单数据
				messageLoginForm: {
					phone: '',
					code: ''
				},
				// 短信登录表单验证规则
				messageLoginRules: {
					phone: [
						{ required: true, message: '请输入手机号码', trigger: 'blur' },
						// 自定义验证规则
						{
							validator: checkMobile,
							trigger: 'blur'
						}
					],
					code: [
						{ required: true, message: '请输入验证码', trigger: 'blur' },
						// 自定义验证规则
						{
							validator: checkCode,
							trigger: 'blur'
						}
					]
				},
				// 密码登录表单数据
				passwordLoginForm: {
					name: '',
					pwd: '',
					// 图片验证码
					captcha: ''
				},
				// 密码可见
				seePwd: false,
				// 密码输入框状态
				passwordStatus: 'password',
				// 密码登录表单验证
				passwordLoginRules: {
					name: [
						{ required: true, message: '请输入手机/邮箱/用户名', trigger: 'blur' },
					],
					pwd: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
					],
					captcha: [
						{ required: true, message: '请输入图片验证码', trigger: 'blur' },
						{ min: 4, max: 4, message: '长度在4个字符', trigger: 'blur' }
					]
				},
				// 验证码倒计时
				computerTime: 0
			}
		},
		methods: {
			// 密码可见切换事件
			seePwdChanged() {
				if(this.seePwd) {
					this.passwordStatus = 'text'
				}else{
					this.passwordStatus = 'password'
				}
			},
			// 短信登录获取验证码
			async getCode() {
				
				if(this.computerTime === 0) {
					// 启动计时器
					this.computerTime = 30
					const	timer = setInterval(()=>{
						// 减减
						this.computerTime --
						
						// 小于等于0停止计时器
						if(this.computerTime<=0) {
							clearInterval(timer)
						}
						
					},1000)
					
					// 发生请求获取验证码
					const { data : res } = await this.$http.get('/sendcode', {params:{
						phone: this.messageLoginForm.phone
					}})
					
					// 判断状态码（不成功就执行）
					if(res.code !== 0){
						// 显示提示框
						this.showAlert = true
						// 提示框文本
						this.alertText = '获取验证码失败！'
						// 倒计时重置
						this.computerTime = 0
						// 清除定时器
						clearInterval(timer)
					}
					
					console.log('发生请求获取验证码',res)
					
				}
				
			},
			// 短信验证码登录
			messageLogin() {
				this.$refs.messageLoginRef.validate(async (valid)=>{
					if(!valid){
						this.showAlert = true
						this.alertText = '数据验证失败，请重新输入！'
						return
					}
					
					// 发生短信登录请求
					const { data : res } = await this.$http.post('/login_sms', this.messageLoginForm)
					
					console.log('发生短信登录请求', res)
					
					// 判断状态码
					if(res.code !== 0) {
						this.showAlert = true
						this.alertText = res.msg
						return
					}
						// 跳转到个人中心
						this.$router.replace('/profile')
						
				})
			},
			// 手机邮箱用户名登录
			passwordLogin() {
				this.$refs.passwordLoginRef.validate(async (valid)=>{
					// 表单预校验
					if(!valid){
						this.showAlert = true
						this.alertText = '数据验证失败，请重新输入！'
						return
					} 
					// 发起请求
					const { data : res } = await this.$http.post('/login_pwd', this.passwordLoginForm)
					
					console.log('手机邮箱用户名登录', res)
					
					// 判断状态码
					if(res.code !== 0) {
						this.showAlert = true
						this.alertText = res.msg
						this.changeCode()
						return
					}
					
					this.$router.replace('/profile')
					
				})
			},
			// 关闭Alert
			closeTip() {
				this.showAlert = false
			},
			// 获取新的图片验证码
			changeCode() {
				this.$refs.captcha.src = 'http://localhost:4000/captcha?time=' + Date.now()
			}
		},
		computed: {
			// 判断手机验证是否通过!
			rightPhone() {
				// 返回的是一个布尔值
				return /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/.test(this.messageLoginForm.phone)
			}
		},
		components:{
			AlertTip
		}
	}
</script>

<style lang="less" scoped>
	.container {
		background: #fff;
		width: 100%;
		height: calc(100vh - 50px);
	}

	.title {
		font-size: 40px;
		font-weight: bold;
		color: #07A373;
		padding: 25px 0 30px;
	}

	.login-nav {
		margin-bottom: 20px;

		.nav-link {
			font-weight: bold;
			font-size: 16px;
			color: #333;
			position: relative;
			padding-bottom: 5px;

			&:not(:first-child) {
				margin-left: 50px;
			}

			&.on {
				color: #07A373;

				&::before {
					position: absolute;
					left: 0;
					bottom: 0;
					content: "";
					width: 100%;
					height: 2px;
					background: #07A373;
				}
			}
		}
	}

	.login-box {
		padding: 0 8%;

		.login-item {
			display: none;

			&.on {
				display: block;
			}

			p {
				margin-top: 10px;
				text-align: center;
				font-size: 14px;
				color: #999;
			}
		}
	}

	.desc {
		font-size: 15px;
		line-height: 20px;
		color: #999;
		font-weight: bold;
	
		span {
			color: #07A373;
			font-weight: bold;
		}
	}
	
	.el-button{
		width: 100%;
		margin: 15px 0;
	}
	
	.code-box{
		position: relative;
		.code{
			position: absolute;
			right: 20px;
			top: 0;
			height: 100%;
			color: #999;
			
			img{
				height: 90%;
			}
			&.on{
				color: #666;
			}
		}
		button{
			background-color: transparent;
			outline: 0;
			border: 0;
			display: block;
			height: 100%;
		}
	}
	
	.el-button{
		background-color: #03A774;
		color: #fff;
	}
	

</style>
